<template>
  <div class="index-screen">
    <img :src="require('../assets/img/homelogo.png')" alt>
    <div class="car-arrow">
      <img width="45" height="45" :src="require('../assets/img/left.png')" alt @click="goLeft">
      <img class="car-logo" :src="staticurl+cars[current].icon" alt>
      <img width="45" height="45" :src="require('../assets/img/right.png')" alt @click="goRight">
    </div>
    <div class="car-name">{{ cars[current].cartype0 }}</div>
    <div class="car-swiper">
                <van-swipe
                  :duration="1000"
                  :show-indicators="false"
                  :initial-swipe="current"
                  @change="onChange"
                  ref="carSwiper"
                  :loop="false"
                >
                  <van-swipe-item v-for="(car, index) in cars" :key="index">
                    <img class="car-img" :src="staticurl+car.img">
                  </van-swipe-item>
                </van-swipe>
              </div>
    <div class="car-info">
      <div class="car-info-detail">
        <div class="detail-list">
          <div style="padding:0 30px;height:100%;display:flex;flex-direction:column;" :title="cars[current].des">
            <van-row style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;max-width:300px;">{{ cars[current].des }}</van-row>
            <van-row style="margin-top:10px;">
              <van-col span="12" style="color:#ffc83d;">特价日租金：{{ cars[current].dayprice0 }}</van-col>
              <van-col span="12">日租金：{{ cars[current].dayprice }}</van-col>
            </van-row>
            <van-row style="margin-top:10px;">
              <van-col span="12">最高时速：{{ cars[current].maxspeed }} Km/h</van-col>
              <van-col span="12">百公里加速：{{ cars[current].speed100time }} 秒</van-col>
            </van-row>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="web-index-screen">
    <div class="web-index-bg y-bgimg"></div>
    <div class="y-first-page">
      <div class="idx-main">
        <div class="idx-cont-warp">
          <div class="cont-wrap">
            <div class="slogan-wrap">
              <div class="car-arrow">
                <div class="car-logo-con">
                  <img
                    width="45"
                    height="45"
                    :src="require('../assets/img/left.png')"
                    alt
                    @click="goLeft"
                  >
                  <img class="car-logo" :src="staticurl+cars[current].icon" alt>
                  <img
                    width="45"
                    height="45"
                    :src="require('../assets/img/right.png')"
                    alt
                    @click="goRight"
                  >
                </div>
              </div>
              <div class="car-swiper">
                <van-swipe
                  :duration="1000"
                  :show-indicators="false"
                  :initial-swipe="current"
                  @change="onChange"
                  ref="carSwiper"
                  :loop="false"
                >
                  <van-swipe-item v-for="(car, index) in cars" :key="index">
                    <img class="car-img" :src="staticurl+car.img">
                  </van-swipe-item>
                </van-swipe>
              </div>
              <div class="car-info">
                <div style="position:absolute;right:5%;" v-if="cars[current].state === 1">
                  <img width="80" height="80" :src="require('../assets/img/rented.png')" alt>
                </div>
                <div class="info-con">
                  <span class="car-title">{{ cars[current].cartype0 }}</span>
                  <span class="car-rent-money">特价日租金：{{ cars[current].dayprice0 }}</span>
                  <div>
                    <span class="car-rent-info">类型：{{ cars[current].cartype1 }}</span>
                    <span class="car-rent-info delete-line">日租金：{{ cars[current].dayprice }}</span>
                  </div>
                  <div class="car-introduce">{{ cars[current].des }}</div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  .i9-home {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  background-color:#1C1C1C;
}
  -->
</template>

<script>
import { NavBar, Swipe, SwipeItem, Row, Col } from 'vant';
import { CarMixin } from '../util/mixin.js';
export default {
  mixins: [CarMixin],
  components: {
    [NavBar.name]: NavBar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Row.name]: Row,
    [Col.name]: Col,
  },
  data() {
    return {
      current: 0,
      left: 0,
      right: 0,
    };
  },
  async created() {
    await this.getCarShows();
  },
  activated() {
    this.current = this.currentIndex;
    if (this.$refs.carSwiper) {
      this.$refs.carSwiper.swipeTo(this.currentIndex);
    }
  },
  methods: {
    async goDetail(id) {
      await this.getCarShowInfo(id);
      this.$router.push({ path: '/info/' + id });
    },
    async swipeItemGo() {
      await this.getCarShowInfo(this.cars[this.current].id);
      this.$router.push({ path: '/info/' + this.cars[this.current].id });
    },
    onChange(index) {
      this.setCurrentIndex(index);
      this.current = index;
    },
    goLeft() {
      if (this.current === 0) {
        return;
      }
      if (this.left === 0) {
        this.left = 1;
        this.right = 0;
      }
      let go_index = 0;
      if (this.current > 0) {
        go_index = this.current - 1;
      }
      this.$refs.carSwiper.swipeTo(go_index);
      this.current = go_index;
      this.setCurrentIndex(this.current);
    },
    goRight() {
      if (this.current === this.cars.length - 1) {
        return;
      }
      if (this.right === 0) {
        this.right = 1;
        this.left = 0;
      }
      this.current = this.current + 1;
      this.$refs.carSwiper.swipeTo(this.current);
      this.setCurrentIndex(this.current);
    },
  },
};
</script>

<style lang="scss" scoped>
.index-screen {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .car-arrow {
    width: 100%;
    height: 120px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .car-name {
    text-align: center;
    font-size: 12px;
    color: #ffffff;
  }
  .car-swiper {
    height: auto;
    width: 100%;
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    margin: auto;
    .car-img {
      height: auto;
      width: 100%;
    }
  }
  .car-info {
    height: 100%;
    width: 100vw;
    display: flex;
    display: -webkit-box;
    flex-flow: column nowrap;
    justify-content: flex-end;
    .car-info-detail {
      margin-bottom: 70px;
      height: 100px;
      color: #ffffff;
      .detail-list {
        width: 100%;
        height: 100%;
        font-size: 12px;
      }
    }
  }
}
</style>
